<template>
  <div>
    <span class="btn" @click="prev">上一页</span>
    <span class="btn" @click="currentPage=1" v-show="pageSum!==0" :class="{'active': 1===currentPage}">1</span>
    <span class="btn" @click="prevEllip" v-show="isShowPrevEllipsis">...</span>
    <span class="btn" @click="currentPage=index" :class="{'active': index===currentPage}" v-for="index in middleList" :key="index">
      {{index}}
    </span>
    <span class="btn" @click="nextEllip" v-show="isShowNextEllipsis">...</span>
    <span class="btn" @click="currentPage=pageSum" v-show="pageSum>1" :class="{'active': pageSum===currentPage}">{{pageSum}}</span>
    <span class="btn" @click="next">下一页</span>
    <div>
      当前页:
      {{currentPage}}
    </div>
  </div>
</template>

<script>
  import './diff.css'
  export default {
    data () {
      return {
        currentPage: 1
      }
    },
    props: {
      total: {
        default:61,
        type: Number
      },
      limit: {
        default: 10,
        type: Number
      }
    },
    computed: {
      pageSum () {
        return this.total%this.limit===0 ? this.total / this.limit : parseInt(this.total / this.limit) + 1
      },
      middleList () {
        if (this.pageSum<=2) {
          return []
        } else if (this.pageSum === 3) {
          return [2]
        } else if (this.pageSum === 4) {
          return [2,3]
        } else if (this.pageSum === 5) {
          return [2, 3, 4]
        } else if (this.pageSum >=6) {
          if (this.currentPage < 3 + 1) {          // 3 + 头
            return [1+1,1+2,1+3]
          } else if (this.currentPage>this.pageSum - 3) {             //　尾 - 3
            return [this.pageSum-3,this.pageSum-2,this.pageSum-1]
          } else {
            return [this.currentPage-1, this.currentPage, this.currentPage+1]
          }
        }
      },
      isShowPrevEllipsis () {
        if (this.pageSum <= 5) {
          return false
        } else {
          if (this.currentPage >= 4) { return true } else { return false }
        }
      },
      isShowNextEllipsis () {
        if (this.pageSum <= 5) {
          return false
        } else {
          if (this.currentPage <= this.pageSum-3) { return true } else { return false }
        }
      }
    },
    methods: {
      prev () {
        this.currentPage = this.currentPage === 1 ? 1 : this.currentPage-1
      },
      next () {
        this.currentPage = this.currentPage === this.pageSum ? this.pageSum : this.currentPage+1
      },
      prevEllip () {
        this.currentPage = this.middleList[0] - 2 
      },
      nextEllip () {
        this.currentPage = this.middleList[2] + 2
      }
    }
  }
</script>